<script setup lang="ts">
import ItemTypeFormItem from '../../item-receive/edit-single/components/item-type-form-item.vue';
import { state, deleteSpareItem, addSpareItem, copySpareItem } from './state';
import { Plus as AppNutIconPlus, Del2 as AppNutIconDel2 } from '@nutui/icons-vue-taro';
import COPY from '/@/assets/image/icon/copy.png';
</script>
<template>
  <!-- item -->
  <view class="spare-form__item" v-for="item in state.spareList" :key="item.id" :item="item">
    <view class="spare-form__header">
      <view class="spare-form__header--left">{{ item.title }}</view>
      <image :src="COPY" @click="copySpareItem(item)" class="spare-form__header__image" />
      <app-nut-icon-del2 @click="deleteSpareItem(item.id)" v-if="item.deletable" />
    </view>
    <!-- 耗材选择列表 -->
    <item-type-form-item
      :item="item"
      :product-list="state.sourceProductList"
      v-if="state.sourceProductList.length > 0"
    />
  </view>
  <!-- 添加button -->
  <nut-button block plain shape="round" type="primary" @click="addSpareItem">
    <template #icon>
      <app-nut-icon-plus />
    </template>
    添加耗材
  </nut-button>
</template>
<style lang="scss">
.spare-form {
  &__header {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 30px;
    &--left {
      flex: 1;
    }
    &__image {
      width: 36px;
      height: 36px;
      margin-right: 20px;
    }
  }
}
</style>
